<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>助农精准扶贫平台</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        .hero {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            padding: 80px 0;
            text-align: center;
        }
        .product-card {
            transition: transform 0.3s;
            cursor: pointer;
        }
        .product-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
        <div class="container">
            <a class="navbar-brand" href="/">助农精准扶贫平台</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse" id="navbarNav">
                <ul class="navbar-nav ms-auto">
                    <li class="nav-item"><a class="nav-link" href="/">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="/products.html">农产品</a></li>
                    <li class="nav-item"><a class="nav-link" href="/login.html">登录</a></li>
                    <li class="nav-item"><a class="nav-link" href="/register.html">注册</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <div class="hero">
        <div class="container">
            <h1 class="display-4">助农精准扶贫平台</h1>
            <p class="lead">连接农户与消费者，助力乡村振兴</p>
            <a href="/products.html" class="btn btn-light btn-lg mt-3">浏览农产品</a>
        </div>
    </div>

    <div class="container my-5">
        <div class="alert alert-info" id="noticeArea" style="display: none;">
            <h5>📢 平台公告</h5>
            <div id="noticeContent"></div>
        </div>

        <h2 class="text-center mb-4">热门农产品</h2>
        <div class="row" id="productList">
            <div class="col-md-3 mb-4">
                <div class="card product-card">
                    <img src="/images/products/tomato.jpg" class="card-img-top" alt="农产品" onerror="this.src='https://via.placeholder.com/300x200?text=农产品'">
                    <div class="card-body">
                        <h5 class="card-title">有机西红柿</h5>
                        <p class="text-muted">山东寿光</p>
                        <p class="text-danger fw-bold">¥5.50/斤</p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="bg-light py-4 mt-5">
        <div class="container text-center">
            <p>&copy; 2025 助农精准扶贫平台. All rights reserved.</p>
        </div>
    </footer>

    <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
    <script>
        $(document).ready(function() {
            loadProducts();
            loadNotices();
        });

        function loadProducts() {
            $.ajax({
                url: '/api/products/list',
                method: 'GET',
                data: { page: 1, size: 8 },
                success: function(response) {
                    if (response.code === 200 && response.data.records.length > 0) {
                        renderProducts(response.data.records);
                    }
                },
                error: function() {
                    console.log('加载农产品失败');
                }
            });
        }

        function renderProducts(products) {
            const container = $('#productList');
            container.empty();
            products.forEach(product => {
                const card = `
                    <div class="col-md-3 mb-4">
                        <div class="card product-card" onclick="location.href='/product_detail.html?id=${product.id}'">
                            <img src="${product.coverUrl}" class="card-img-top" alt="${product.name}" 
                                 onerror="this.src='https://via.placeholder.com/300x200?text=${product.name}'">
                            <div class="card-body">
                                <h5 class="card-title">${product.name}</h5>
                                <p class="text-muted">${product.region || ''}</p>
                                <p class="text-danger fw-bold">¥${product.price}/${product.unit}</p>
                            </div>
                        </div>
                    </div>
                `;
                container.append(card);
            });
        }

        function loadNotices() {
            $.ajax({
                url: '/api/notices/list',
                method: 'GET',
                success: function(response) {
                    if (response.code === 200 && response.data.length > 0) {
                        const notice = response.data[0];
                        $('#noticeContent').html(`<p class="mb-0"><strong>${notice.title}:</strong> ${notice.content}</p>`);
                        $('#noticeArea').show();
                    }
                }
            });
        }
    </script>
</body>
</html>

